<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 的 CSS 文件 -->
    <link href="./plugins/bootstrap@5.1.3/css/bootstrap.min.css" rel="stylesheet" >

    <title>title</title>
</head>
<body>
<div id="navDiv"></div>
<script src="js/commons/nav.js"></script>
<!-- 表单容器 -->
<div class="container mt-2">
    <div class="row justify-content-center">
        <div class="col-lg-3 col-md-4 col-sm-6">
<!--      表单控件-->
            <form id="loginForm">
                <div class="mb-3">
                    <label for="telphoneInput" class="form-label">手机号码</label>
                    <input type="text" class="form-control" id="telphoneInput" aria-describedby="emailHelp">
<!--                    <div id="emailHelp" class="form-text">国内手机号码.</div>-->
                </div>
                <div class="mb-3">
                    <label for="passwordInput" class="form-label">密码</label>
                    <input type="password" class="form-control" id="passwordInput">
                </div>
                <button type="submit" class="btn btn-primary w-100">登录</button>
            </form>
<!--            \表单控件-->
        </div>
    </div>
</div>
<!-- \表单容器 -->
<!--消息弹框-->
<div class="toast align-items-center text-white bg-danger position-absolute top-0 start-50 translate-middle-x " data-bs-delay="2000" id="loginToast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
        <div class="toast-body">
            Hello, world! This is a toast message.
        </div>
        <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
</div>
<!--\消息弹框-->
<!-- 选项 1：包含 Popper 的 Bootstrap 集成包 -->
<script src="./plugins/bootstrap@5.1.3/js/bootstrap.bundle.min.js"></script>
<script src="./plugins/just-validate@3.8.1/just-validate.production.min.js"></script>
<script type="text/javascript">
    const validation = new JustValidate('#loginForm', {
        errorFieldCssClass: 'is-invalid',
        errorLabelStyle: {
            fontSize: '14px',
            color: '#dc3545',
        },
        successFieldCssClass: 'is-valid',
        successLabelStyle: {
            fontSize: '14px',
            color: '#20b418',
        },
        focusInvalidField: true,
        lockForm: true,
    });

    validation
        .addField(
            '#telphoneInput',
            [
                {
                    rule: 'required',
                    errorMessage:"手机号码必须填写!"
                },
                {
                    rule: 'customRegexp',
                    value: /1[3-9]\d{9}/,
                    errorMessage:"手机号码格式不正确"
                }
            ],
            {
                successMessage: 'Looks good!',
            }
        ).addField(
        '#passwordInput',[
            {
                rule: 'required',
                errorMessage:"密码必须填写!"
            }
        ],
        {
            successMessage: 'nice!',
        }
        ).onSuccess((ev) => {
            ev.preventDefault();
            //获得用户输入的数据
        let telphone=  document.querySelector("#telphoneInput").value;
        let pwd=  document.querySelector("#passwordInput").value;
        let data={'telphone':telphone,'pwd':pwd};
            //通过fetch发送异步请求
        fetch(`/user/login`,{
               method:'post',
               headers:{
                   "content-type":'application/json'
               },
               body:JSON.stringify(data)
           }).then(response=>response.json()).then(data=>{
                if(data.flag){
                    //将用户信息存储到sessionStroage
                    let userInfo=data.data;
                    sessionStorage.setItem("shop.userInfo",JSON.stringify(userInfo));
                    //进行跳转
                    location.href="index.html"
                }else{
                    //alert(data.message);
                    //展示弹框
                    let loginToastDiv = document.getElementById('loginToast');
                    let loginToast = new bootstrap.Toast(loginToastDiv);
                    //设置消息
                    let toastBody= document.querySelector("#loginToast .toast-body");
                    toastBody.innerHTML=data.message;
                    //显示弹框
                    loginToast.show();
                }
           })

        });

</script>
<!-- 选项 2：Popper 和 Bootstrap 的 JS 插件各自独立 -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.2/dist/umd/popper.min.js" integrity="sha384-q9CRHqZndzlxGLOj+xrdLDJa9ittGte1NksRmgJKeCV9DrM7Kz868XYqsKWPpAmn" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-YSu1vEueMOXZYSSiTgjRD6egOBAdWrKI6AQBdHjTtvftX42GZLCVzwlxm0RJuipa" crossorigin="anonymous"></script>
-->

</body>
</html>